<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
</head>
<body>
<div id="app">
    <div class="title-row">
        <select v-model="mode">
            <option value="1">人人对战</option>
            <option value="2">人机对战</option>
        </select>
        <select v-model="hard" v-show="mode==2">
            <option value="0">新手</option>
            <option value="1">入门</option>
            <option value="2">准初级</option>
            <option value="3">初级</option>
        </select>
        <button @click="click_start">开始游戏</button>
        <button @click="auto">自动玩</button>
        <select v-model="speed" v-show="mode==2">
            <option :value="n" v-for="n in 10">每秒{{n}}步</option>
        </select>
        <button @click="stop">停止</button>
        <span>{{msg}}</span>
        <span v-if="count>0">已下{{count}}局</span>
        <button @click="prev_step" v-show="status==1">上一步</button>
    </div>
    <div class="container">
        <div 
        class="td" 
        :class="{empty:status==1&&!v[0],white:v[0]==1,black:v[0]==2,win:v[2]}"
        @click="do_run(v,i)"
        v-for="(v,i) in list">
            <div class="qz">{{v[1]}}</div>
        </div>
    </div>
    <div class="info">
        <div class="user">
            <h4>白方：</h4>
            步数：{{step[1].length}} <br/>
            胜 {{win_count[1]}} 场
        </div>
        <div class="user">
            <h4>黑方：<small v-show="mode==2">电脑</small></h4>
            步数：{{step[2].length}} <br/>
            胜 {{win_count[2]}} 场
        </div>
    </div>
</div> 
</body>
</html>
<style>
*{
    box-sizing: border-box;
}
.empty:hover{
    background: rgb(194, 221, 198);
}
.td{
    width:40px;
    height:40px;
    line-height: 40px;
    text-align: center;
    float:left;
    border-right:1px solid black;
    border-bottom:1px solid black;
    cursor: default;
}
#app,.container{
    width:601px;
    float:left;
    margin:.5rem calc(50% - 300px);
}
.container{
    border-left:1px solid black;
    border-top:1px solid black;
    background:rgb(220,190,161);
}
.info{
    float:left;
    width:100%;
}
.user{
    float: left;
    width:50%;
}
.user h4{
    margin:.5rem 0;
}
.qz{
    width:30px;
    height:30px;
    margin:5px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
}
.white .qz{
    background:white;
    color:black;
}
.black .qz{
    background-color: black;
    color:white;
}
.win{
    background: gold;
}
</style>
<script src="./static/js/vue.min.js"></script>
<script src="./static/js/fun.js"></script>
<script src="./five_ai.js"></script>
<script>
new Vue({
    el:"#app",
    data:{
        mode:2,
        list:[],//棋盘，0：(0没下棋，1白方，2黑方)；1: 第几步,2连线的五个子
        who:1,//1白方，2黑方
        step:["",[],[]],
        win_count:{
            1:0,
            2:0,
        },
        status:0,//0未开始，1进行中，2完成
        msg:"未开始",//提示信息
        timer:"",
        timer2:"",//自动玩
        count:0,//局数
        hard:3,//电脑难度：0，随便，1纯防守，2只进攻四子，3四三子结合攻防
        speed:5,//
        is_auto_status:false,
    },
    created(){
        this.init();
    },
    methods:{
        init(){
            var list=[];
            for(var i=0;i<225;i++){
                list.push([]);
            }
            this.list=list;
            this.who=1;
            this.step=["",[],[]];
        },
        click_start(){
            this.is_auto_status=false;
            this.start();
        },
        start(){
            this.status=1;
            this.msg="白先走";
            this.init();
        },
        stop(){
            this.status=2;
            this.is_auto_status=false;
        },
        prev_step(){
            if(this.mode==2){
                this.prev(2);
            }else{
                this.prev();
            }
        },
        prev(step){
            step=step>0?step:1;
            for(var i=0;i<step;i++){
                var color=this.who==1?2:1;
                var last=this.step[color].pop();
                this.list.splice(last,1,[]);
                this.who=color;
            }
        },
        auto(){
            if(this.status!=1){
                this.start();
            }
            clearInterval(this.timer2);
            this.is_auto_status=true;
            this.timer2=setInterval(()=>{
                if(this.status==1){
                    this.ai_run(this.who)
                }else{
                    clearInterval(this.timer2);
                    this.is_auto_status=false;
                }
            },1000/this.speed)
        },
        get_color(color){
            var empty=[];
            this.list.map((v,i)=>{
                if(v[0]==color){
                    empty.push(i);
                }
            })
            return empty;
        },
        no_ai(){
            var empty=this.get_color();
            var r=fun.rand(0,empty.length-1);
            return empty[r];
        },
        do_run(v,i){
            if(this.mode==2&&this.who!=1) return;
            this.run(v,i);
        },
        ai_run(color){
            color=color?color:1;
            if(this.hard==0){
                var i=this.no_ai();
            }else{
                var i=ai.run(this.list,this.hard,color);
                if(i==-1){
                    i=this.no_ai();
                }
            }
            var v=this.list[i];
            this.run(v,i);
        },
        run(v,i){
            if(v[0]||this.status!=1) return;
            v[0]=this.who;
            this.step[this.who].push(i);
            v[1]=this.step[this.who].length;
            this.list.splice(i,1,v);
            if(this.is_win()==false){
                this.who=this.who==1?2:1;
                this.msg=(this.who==1?"白棋":"黑棋")+'走';
                if(this.get_color().length==0){
                    this.status=2;
                    this.msg="和棋";
                    setTimeout(()=>{
                        alert(this.msg);
                    })
                    return;
                }
                if(this.mode==2&&this.who==2){
                    this.ai_run();
                }
            }
        },
        is_win(){
            //横
            for(var i=0;i<225;i++){
                if(this.win(i)){
                    this.finish();
                    return true;
                }
            }
            return false;
        },
        win(index){
            var color=this.list[index][0];
            if(!color) return false;
            re=[index];
            if(index%15<11){
                //横
                for(var i=1;i<5;i++){
                    var now=index+i;
                    if(now>225){
                        console.log("now",now,index,i);
                    }
                    if(this.list[now][0]==color){
                        re.push(now);
                    }else{
                        break;
                    }
                }
                if(re.length>=5){
                    this.re=re;
                    return true;
                }else{
                    re=[index];
                }
                //右下
                if(Math.floor(index/15)<11){
                    for(var i=1;i<5;i++){
                        var now=index+16*i;
                        if(now>225){
                            console.log("now",now,index,i);
                        }
                        if(this.list[now][0]==color){
                            re.push(now);
                        }else{
                            break;
                        }
                    }
                    if(re.length>=5){
                        this.re=re;
                        return true;
                    }else{
                        re=[index];
                    }
                }
            }
            //竖直
            if(Math.floor(index/15)<11){
                for(var i=1;i<5;i++){
                    var now=index+15*i;
                    if(now>225){
                        console.log("now",now,index,i);
                    }
                    if(this.list[now][0]==color){
                        re.push(now);
                    }else{
                        break;
                    }
                }
                if(re.length>=5){
                    this.re=re;
                    return true;
                }else{
                    re=[index];
                } 
                  //左下
                if(index%15>3){
                    for(var i=1;i<5;i++){
                        var now=index+14*i;
                        if(now>225){
                            console.log("now",now,index,i);
                        }
                        if(this.list[now][0]==color){
                            re.push(now);
                        }else{
                            break;
                        }
                    }
                    if(re.length>=5){
                        this.re=re;
                        return true;
                    }else{
                        re=[index];
                    }
                }
            }
            return false;
        },
        finish(){
            this.msg="游戏结束："+(this.who==1?"白方":'黑方')+"胜";
            this.win_count[this.who]++;
            this.status=2;
            this.count++;
            this.re.map(index=>{
                this.list[index][2]=true;
            })
            console.log(this.timer2)
            setTimeout(()=>{
                if(this.is_auto_status){
                    this.auto();
                }else{
                    alert(this.msg);
                }
            },500)
        }
    }
})
</script>